<!-- 订单页 -->
<template>
	<view class="outer">
		<view class="no-shopping" v-if="!hasOrder">
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" text="订单列表空空如也，快去下单吧">
			</u-empty>
		</view>
		<view class="main" v-if="hasOrder">
			<ul>
				<li v-for="(item,index) in orderList" :key="index">
					<view class="li-main" @click='showOrderInfo(item.id)'>
						<view class="img-info">
							<figure>
								<image src="../../static/imgs/coffee.jpg" mode="scaleToFill"></image>
							</figure>
						</view>
						<view class="item">
							<view class="address">
								<text class="text-strong">地址：</text>
								<text>{{item.address || ''}}</text>
							</view>
							<view class="consignee">
								<text class="text-strong">收件人：</text>
								<text>{{item.consignee || ''}}</text>
							</view>
							<view class="phone">
								<text class="text-strong">手机号：</text>
								<text>{{item.phone || ''}}</text>
							</view>
							<view class="payMethod">
								<text class="text-grey">配送方式：</text>
								<text>{{item.payMethod == 1 ? '自提':'商家配送'  || ''}}</text>
							</view>
							<view class="amount">
								<text class="text-strong">总花费：</text>
								<text class="text-orange-strong">￥{{item.amount || ''}}</text>
							</view>
						</view>
					</view>
					<view class="btn">
						<view class="cancel-btn" v-show="item.status!=4" @click="cancelOrder(item.id)">
							<text>取消该订单</text>
						</view>
						<view class="confrim-btn" v-show="item.status==3" @click="confirmOrder(item)">
							<text>确认收货</text>
						</view>
					</view>
					<view class="zhanwei" v-show="item.status==4">

					</view>
				</li>
			</ul>
		</view>
		<view class="zhan-wei">

		</view>
		<!-- 订单详情弹窗 -->
		<u-popup :show="show" mode="center" @close="close" @open="open">
			<view class="order">
				<text class="text-strong">订单详情：</text>
				<view class="order-info" v-for="(item,index) in orderInfo" :key='index'>
					<view class="name">
						<text class="text-strong">商品名：</text>
						<text>{{item.name || ''}}</text>
					</view>
					<view class="number">
						<text class="text-strong">数量：</text>
						<text>{{item.number || ''}}</text>
					</view>
					<view class="flavor" v-show="item.flavor != ''">
						<text class="text-strong">口味：</text>
						<text>{{item.flavor || '暂无'}}</text>
					</view>
					<view class="amount">
						<text class="text-strong">单价：</text>
						<text class="text-orange-strong">￥{{item.amount || ''}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		<template>
			<u-modal :show="showModel" :title="title" :content='content' @confirm='closeModel'></u-modal>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 订单列表
				orderList: [],
				hasOrder: true,
				show: false,
				// 订单详情
				orderInfo: [],
				showModel: false,
				content: '您的订单已确认收货！',
				title: '订单提示'
			}
		},
		methods: {

			// 获取订单信息
			getOrder() {
				this.$ajax.getOrderList.get().then(res => {
					if (res.data.length == 0) {
						this.hasOrder = false;
					} else {
						this.hasOrder = true;
						this.orderList = res.data;
					}

				})
			},

			// 取消订单
			cancelOrder(id) {
				this.$ajax.removeOrder.delete({
					id: id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '取消成功！',
							icon: 'success'
						})
						this.getOrder();
					}
				})
			},

			close() {
				this.show = false
			},
			open() {
				this.show = true;
			},

			closeModel() {
				this.showModel = false;
				this.getOrder()
			},

			// 展示订单详情
			showOrderInfo(id) {
				this.show = true;
				this.orderInfo = [];
				this.$ajax.getOrderDetail.get({
					orderId: id
				}).then(res => {
					if (res.code == 1) {
						res.data.map(item => {
							this.orderInfo.push({
								name: item.name,
								number: item.number,
								amount: item.amount,
								flavor: item.coffeeFlavor
							})
						})

					} else {
						uni.showToast({
							title: "获取失败！",
							icon: 'error'
						})
					}
				})
			},

			// 确认收货订单
			confirmOrder(item) {
				this.$ajax.setOrderStatus.post({
					id: item.id,
					status: 4
				}).then((res) => {
					if (res.code == 1) {
						this.showModel = true;
					}
				})
			}
		},
		mounted() {
			this.getOrder();
		}
	}
</script>

<style lang="scss" scoped>
	.outer {

		.main {
			li {
				padding: 10rpx 5rpx 0 10rpx;
				display: flex;
				margin: 0 0 10rpx 0;
				height: 200rpx;
				justify-content: space-between;

				.li-main {
					display: flex;

					.img-info {
						margin-right: 20rpx;

						image {
							width: 200rpx;
							height: 200rpx;
						}
					}

					.item {
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						align-items: flex-start;

						.text-strong {
							font-weight: 650;
						}

						.text-grey {
							color: #aaa;
						}

						.text-orange-strong {
							font-weight: 600;
							color: #ee651b;
						}
					}
				}

				.btn {
					display: flex;
					flex-direction: column;
					justify-content: space-around;


					.cancel-btn {
						width: 140rpx;
						padding: 10rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 14px;
						background-color: #f56c6c;
						color: #fff;
						border-radius: 10rpx;
					}

					.confrim-btn {
						width: 140rpx;
						padding: 10rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 14px;
						color: #fff;
						background-color: #2979ff;
						border-radius: 10rpx;
					}
				}

				.zhanwei {
					width: 94rpx;
				}
			}
		}

		.zhan-wei {
			height: 50px;
		}

		.order {
			padding: 20px;

			.text-strong {
				font-weight: 650;
			}

			.order-info {
				background-color: #fff;
				border-radius: 10px;
				// padding: 20px;
				display: flex;
				flex-direction: column;
				overflow: auto;

				view {
					margin: 10px;
				}

				.text-strong {
					font-weight: 650;
				}

				.text-grey {
					color: #aaa;
				}

				.text-orange-strong {
					font-weight: 600;
					color: #ee651b;
				}
			}
		}


	}
</style>
